<template>
  <div @keydown.enter="handleSubmit" v-if="Spin">
    <ul class="bg-bubbles">
      <li v-for="i in 10" :key="i" class="bubbles-li"></li>
    </ul>
    <div class="login-con">
      <Card :bordered="false">
        <p slot="title">
          <Icon type="log-in"></Icon>
          欢迎登录
        </p>
        <div class="form-con">
          <Form ref="loginForm" :model="form" :rules="rules">
            <FormItem prop="username">
              <Input
                prefix="ios-contact"
                v-model.trim="form.username"
                placeholder="请输入用户名"
              >
              </Input>
            </FormItem>
            <FormItem prop="pwd">
              <Input
                prefix="md-lock"
                password
                type="password"
                v-model.trim="form.pwd"
                placeholder="请输入密码"
              >
              </Input>
            </FormItem>
            <FormItem>
              <Button @click="handleSubmit" type="primary" :loading="isLoding"
                >登录</Button
              >
            </FormItem>
          </Form>
        </div>
      </Card>
    </div>
  </div>
</template>
<script>
import axios from "axios";
// import util from "../libs/util";
// import {mapActions} from 'vuex'
export default {
  data() {
    return {
      Spin: true,
      isLoding: false,
      // form: {
      //   username: "13806816807",
      //   password: "000000"
      // },
      form: {
        // username: "superAdmin",
        // password: "123456",
        username: "x123",
        pwd: "123456",
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        pwd: [{ required: true, message: "密码不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    autoLogin() {
      return;
      if (window.location.href.indexOf("street") < 0) {
        this.Spin = true;
        return;
      }
      this.$Spin.show({
        render: (h) => {
          return h("div", [
            h("Icon", {
              class: "demo-spin-icon-load",
              props: {
                type: "load-c",
                size: 60,
              },
            }),
            h("div", { style: { fontSize: "60px" } }, "正在连接..."),
          ]);
        },
      });
      ////开始取消
      let arr = window.location.href.split("?");
      // let params = arr[1].split("&");
      // let obj = {};
      // params.forEach((item) => {
      let inner = arr[1].split("=");
      //   obj[inner[0]] = inner[1];
      // });
      // let j1 = Base64.encodeURI(obj.street);
      // let j2 = Base64.encodeURI(j1);

      // 解密
      // let z1 = Base64.decode(obj.street);
      // let z2 = Base64.decode(z1);
      // let street = encodeURIComponent(z2);
      // 123456street娄桥街道 //TVRJek5EVTJjM1J5WldWMGMzVndaWEpoWkcxcGJn
      // let arry = street.split("street");
      if (inner[1] === "TVRJek5EVTJjM1J5WldWMGMzVndaWEpoWkcxcGJn") {
        this.form = {
          username: "adminPlatform",
          password: "ymb8DfqK",
        };
        axios
          .post("/user/login", this.form)
          .then((res) => {
            console.log("获得", res);
            if (res.code == 200) {
              sessionStorage.setItem("auth", res);
              return;
              axios.get(`/hlapi/Auth/LoginUserInfo`).then((item) => {
                if (item.code == 200) {
                  sessionStorage.setItem("user", item.data.name);
                  sessionStorage.setItem("password", this.form.password);
                  let userdata = {
                    name: item.data.name,
                    username: item.data.username,
                    departmentName: item.data.nickName,
                    street: item.data.street,
                    adminType: item.data.adminType,
                  };
                  sessionStorage.setItem("userdata", JSON.stringify(userdata));
                  if (item.data.adminType == 0) {
                    this.$Message.warning("请联系管理员开通权限");
                    return;
                  }
                  // let wantarry = item.data.menuPermission.concat(["personnel"]);
                  // this.getCanRouterList(wantarry);
                  this.getCanRouterList(item.data.menuPermission);
                  this.$Spin.hide();
                  this.$loadWaterMark();
                }
              });
            } else {
              // this.$Message.error(e.msg);
              this.$Spin.show({
                render: (h) => {
                  return h("div", [
                    h("Icon", {
                      class: "demo-spin-icon-load",
                      props: {
                        type: "load-c",
                        size: 60,
                      },
                    }),
                    h("div", { style: { fontSize: "60px" } }, e.msg),
                  ]);
                },
              });
              // this.$Spin.hide();
            }
            this.isLoding = false;
            // this.$Spin.hide();
          })
          .catch((err) => {
            this.isLoding = false;

            // this.$Spin.hide();
          });
      }
    },
    getCanRouterList(arr) {
      let temp = arr.map((item) => {
        return { name: item };
      });
      console.log("temp", temp);
      let targetList = util.filterArr(this.$store.state.app.routers, temp);
      console.log("targetList", targetList);
      let newList = [];
      targetList.forEach((item) => {
        if (item.name) {
          if (item.name != "group-data") {
            newList.push(item.name);
          }
        }
      });

      newList = [...new Set(newList)];
      newList = newList.map((item) => {
        return { name: item };
      });
      console.log("newList", newList);
      console.log("newList", newList[0].name);
      sessionStorage.setItem("canRouterList", JSON.stringify(newList));
      this.$router.push({
        name: newList[0].name,
      });
    },
    // ...mapActions("user",["getUserInfo"]),
    // ...mapActions("common",["getTypeList"]),
    handleSubmit() {
      this.$Spin.hide();
      this.Spin = true;
      // sessionStorage.setItem("user", "ZZD");
      // sessionStorage.setItem("auth",'123');
      // sessionStorage.setItem(
      //           "userdata",
      //           JSON.stringify('123')
      //         );
      // this.getCanRouterList([
      //   "operation",
      //   "task",
      //   "control",
      //   "controlPersonnel",
      //   "carManagement",
      //   "carList",
      //   "userManagement",
      //   "driver",
      //   "organizer",
      // ]);
      // this.$router.push({
      //   name: "home_index",
      // });
      this.$refs["loginForm"].validate((valid) => {
        this.isLoding = true;
        if (valid) {
          axios
            .post("/user/login", this.form)
            .then((res) => {
              console.log("bei", res);
              if (res.code == "ok") {
                this.$router.push({
                  name: "home",
                });
                return;
                sessionStorage.setItem("user", "zzd");
                // sessionStorage.setItem("auth", res.data);
                let userdata = {
                  name: "test",
                  username: "test",
                  departmentName: "测试部门",
                  street: "街道",
                  adminType: 0,
                  isPTU: false,
                };
                sessionStorage.setItem("userdata", JSON.stringify(userdata));
                this.getCanRouterList(["sysManagement", "sysType"]);
                // this.$router.push({
                //   name: "home_index"
                // });

                this.isLoding = false;
                // this.$loadWaterMark();
                return;
                axios.get(`/hlapi/Auth/LoginUserInfo`).then((item) => {
                  if (item.code == 200) {
                    sessionStorage.setItem("user", item.data.name);
                    sessionStorage.setItem("password", this.form.password);
                    let userdata = {
                      name: item.data.name,
                      username: item.data.username,
                      departmentName: item.data.nickName,
                      street: item.data.street,
                      adminType: item.data.adminType,
                      isPTU: item.data.isPTU,
                    };
                    sessionStorage.setItem(
                      "userdata",
                      JSON.stringify(userdata)
                    );
                    if (item.data.adminType == 0) {
                      this.$Message.warning("请联系管理员开通权限");
                      return;
                    }
                    // let wantarry = item.data.menuPermission.concat([
                    //   "personnel",
                    // ]);
                    // this.getCanRouterList(wantarry);
                    this.getCanRouterList(item.data.menuPermission);
                    this.$loadWaterMark();
                    // this.getCanRouterList([
                    //   "transferScene",
                    //   "home",
                    //   "ownspace_index",
                    //   "taskDetails",
                    //   "sysdictdata",
                    //   "earlyInformation",
                    //   "early",
                    //   "transShow",
                    //   "operation",
                    //   "task",
                    //   "HSManagement",
                    //   "HSTask",
                    //   "HSTaskCode",
                    //   "Anomaly",
                    //   "PTU",
                    //   "instructOrder",
                    //   "StatePersonnel",
                    //   "PreMarshalling",
                    //   "carbarn",
                    //   "PersonnelManagement",
                    //   "sysManagement",
                    //   "organizer",
                    //   "carList",
                    //   "sysType",
                    // ]);
                  }
                });
              } else {
                this.$Message.error(e.msg);
              }
              this.isLoding = false;
            })
            .catch(() => {
              this.isLoding = false;
            });
        }
      });
    },
  },
  mounted() {
    // this.autoLogin();
  },
};
</script>

<style lang="less">
.login-con {
  width: 600px;
  margin: 15% auto 0;
  border: 1px solid red;
}
.bg-bubbles {
  background: linear-gradient(to bottom right, #50a3a2, #409eff);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bubbles-li {
  position: absolute;
  bottom: -160px;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  list-style: none;
  animation: square 15s infinite;
  transition-timing-function: linear;
}

.bubbles-li:nth-child(1) {
  left: 10%;
}

.bubbles-li:nth-child(2) {
  left: 20%;
  width: 90px;
  height: 90px;
  animation-delay: 2s;
  animation-duration: 7s;
}

.bubbles-li:nth-child(3) {
  left: 25%;
  animation-delay: 4s;
}

.bubbles-li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-duration: 8s;
  background-color: rgba(255, 255, 255, 0.3);
}

.bubbles-li:nth-child(5) {
  left: 70%;
}

.bubbles-li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  animation-delay: 3s;
  background-color: rgba(255, 255, 255, 0.2);
}

.bubbles-li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  animation-delay: 2s;
}

.bubbles-li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
  animation-duration: 15s;
}

.bubbles-li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  animation-delay: 2s;
  animation-duration: 12s;
  background-color: rgba(255, 255, 255, 0.3);
}

.bubbles-li:nth-child(10) {
  left: 85%;
  width: 160px;
  height: 160px;
  animation-delay: 5s;
}
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.demo-spin-col {
  height: 100px;
  position: relative;
  border: 1px solid #eee;
}
@keyframes square {
  0% {
    opacity: 0.5;
    transform: translateY(0px) rotate(45deg);
  }

  25% {
    opacity: 0.75;
    transform: translateY(-400px) rotate(90deg);
  }

  50% {
    opacity: 1;
    transform: translateY(-600px) rotate(135deg);
  }

  100% {
    opacity: 0;
    transform: translateY(-1000px) rotate(180deg);
  }
}
</style>
